<div style="padding:20px;">
    <div id="dituiuser" v-cloak>
        <div style="background:#FFF;padding:10px;margin-bottom:20px;display:flex;font-size:14px;color:#666;border-radius:10px;text-align:center">
            <div style="width:80px;border-right:1px solid #efefef;">
                <div style="font-weight:bold;">门店ID</div>
                <div>{{shopObj.shop_id}}</div>
            </div>
            <div style="flex:3;border-right:1px solid #efefef;">
                <div style="font-weight:bold;">门店名称</div>
                <div>{{shopObj.shop_name}}</div>
            </div>
<!--            <div style="flex:1;">-->
<!--                <div style="font-weight:bold;">门店logo</div>-->
<!--                <div>能动乐</div>-->
<!--            </div>-->
            <div style="flex:2;border-right:1px solid #efefef;">
                <div style="font-weight:bold;">营业时间</div>
                <div>{{shopObj.shop_hours}}</div>
            </div>
            <div style="flex:2;border-right:1px solid #efefef;">
                <div style="font-weight:bold;">联系人</div>
                <div>{{shopObj.linkman}}</div>
            </div>
            <div style="flex:2;border-right:1px solid #efefef;">
                <div style="font-weight:bold;">联系电话</div>
                <div>{{shopObj.phone}}</div>
            </div>
            <div style="flex:5;border-right:1px solid #efefef;">
                <div style="font-weight:bold;">门店地址</div>
                <div>{{shopObj.address}}</div>
            </div>
            <div style="flex:2;border-right:1px solid #efefef;">
                <div style="font-weight:bold;">剩余积分</div>
                <div style="color:#F00;font-weight:bold;">{{shopObj.shop_lastfen}}</div>
            </div>
            <div style="width:200px;text-align: right;padding-right:10px;padding-top:2px;">
                <el-button type="danger" @click="modifyShop">修改本店信息</el-button>
            </div>
        </div>

        <el-empty v-if="tableData.length==0" description="无数据，请联系平台客服添加推广活动"></el-empty>
        <el-table v-else :data="tableData" style="width: 100%">
            <el-table-column label="页面名称" >
                <template slot-scope="scope">
                    <div>活动ID号：{{scope.row.page_id}}</div>
                    <div>{{scope.row.page_name}}</div>
                </template>
            </el-table-column>
            <el-table-column label="页面标题" >
                <template slot-scope="scope">{{scope.row.p_title}}</template>
            </el-table-column>
            <el-table-column label="分享标题">
                <template slot-scope="scope">{{scope.row.p_sharetitle}}</template>
            </el-table-column>
            <el-table-column label="累计进线数量" width="200">
                <template slot-scope="scope">
                    <div style="color:#00F;font-weight:bold;">{{scope.row.p_inlinenum}}</div>
                </template>
            </el-table-column>
<!--            <el-table-column label="备注">-->
<!--                <template slot-scope="scope">{{scope.row.p_remark}}</template>-->
<!--            </el-table-column>-->
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
<!--                    <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑推广页面</el-button>-->
                    <el-button type="success" size="mini" @click="showDituiBox(scope.$index, scope.row)">添加推广码 / 预览</el-button>
<!--                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <div style="text-align:right;background:#FFF;padding:20px 0;margin-top:0px;">
        <el-pagination
                background
                layout="total,prev, pager, next"
                :total="totalItems"
                :page-size="pageSize"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage">
        </el-pagination>
        </div>

        <el-dialog :title="nowpage_name" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dituMaBoxShow" width="70%">
            <el-form>
                <el-input v-model="sellerId" placeholder="请输入地推员ID号" autocomplete="off"></el-input>
            </el-form>
            <div>
                <div style="display:flex;flex-wrap: wrap;justify-content: flex-start;">
                    <div style="text-align:center;width:160px;"
                         v-for="(item, index) in maList" :key="item.dm_id">
                        <div><img :src="item.dm_path+'?v=3'" style="width:160px;" /></div>
                        <div>地推专员ID：<span style="color:#F00;">{{item.dm_userid}}</span></div>
                        <div>地推员姓名：<span>{{item.dm_truename}}</span></div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dituMaBoxShow = false">取 消</el-button>
                <el-button :disabled="butajaxing" type="primary" @click="runAddDtMa">确定添加推广码</el-button>
            </div>
        </el-dialog>

    </div>
</div>

<script>
    var _theData = <?php echo json_encode($data); ?>;
    console.log(_theData);
    //alert(BASE_URL+"***"+STORE_URL);
    new Vue({
        el: '#dituiuser',
        data: {
            test:'aaaaaaaaaaaa',
            butajaxing:false,
            sellerId:"",
            formInline: {
                name: '',
                phone: '',
                remark: '',
            },
            dituMaBoxShow:false,
            remarkBoxShow:false,
            remarkTxt:'',
            page_id:0,
            nowpage_name:"",

            tableData: _theData.list,
            shopObj: _theData.shop,
            maList:[],
            currentPage: 1,
            pageSize: PAGESIZE,     //PAGESIZE
            totalItems: _theData.allNum // 假设总共有100条记录
        },
        methods: {
            handleEdit(index, row) {
                this.page_id = row.page_id;
                window.location.href = "/index.php?s=/store/ditui.dtactive/modifyActive/actid/"+row.page_id;
            },
            modifyShop(){
                var shopid = this.shopObj.shop_id;
                window.location.href = "/index.php?s=/store/ditui.dtactive/modifyShop/shopid/"+shopid;
            },
            showDituiBox(index, row){
                this.page_id = row.page_id;
                this.nowpage_name = row.page_name;
                this.dituMaBoxShow = true;
                this.getDituiMa();
            },
            runAddDtMa(){
                var _this = this;
                if($.trim(this.sellerId)==""){
                    this.$message.error('请输入地推员ID号');
                }
                else{
                    this.butajaxing = true;
                    $.post('/index.php?s=/store/ditui.Dtactive/setDtMa', {"sellerId": this.sellerId,
                        'actid':this.page_id, 'actname':this.nowpage_name}, function (_res) {
                        _this.butajaxing = false;
                        if(_res.code==0){
                            _this.$message.error(_res.msg);
                        }
                        else{
                            _this.$message({
                                message: _res.data.msg,
                                type: 'success'
                            });
                            _this.sellerId = "";
                            //重新获取地推人员列表
                            _this.getDituiMa();
                        }
                    })
                }
            },
            getDituiMa(){
                var _this = this;
                $.post('/index.php?s=/store/ditui.Dtactive/getMaList', {'actid':this.page_id}, function (_res) {
                    _this.butajaxing = false;
                    _this.maList = _res.data.dd;
                })
            },
            handleCurrentChange(val) {
                this.currentPage = val;
            }
        }
    });
</script>